$(document).ready(function(){					
	var canvas = document.getElementById('canvas');//画布
	var stage = new JTopo.Stage(canvas);//舞台
	var scene = new JTopo.Scene(stage);//场景
	scene.background = './img/bg.jpg';
	
	var directions = ['down', 'up', 'left', 'right'];
	var direction = directions[Math.floor(Math.random()*directions.length)];
	
	function addNode(text, color){
        var node = new JTopo.Node();
        node.setImage('./img/'+ color +'.png', true);
        node.fontColor = '0,0,0';
        scene.add(node);
        
        node.mouseover(function(){
            this.text = text;
        });
        node.mouseout(function(){
            this.text = null;
        });
        return node;
    }
    
    function addLink(nodeA, nodeZ){
        var link = new JTopo.FlexionalLink(nodeA, nodeZ);
        if(direction == 'down' || direction == 'up'){
        	link.direction = 'vertical';
        }else{
        	link.direction = 'horizontal';
        }
        link.strokeColor = '204,204,204';
        link.lineWidth = 1;
        scene.add(link);
        return link;
    }
    
    var rootNode = addNode('root', 'gray');
    
    var icons = ['green', 'blue', 'red1', 'red2'];
    for(var i=0; i<icons.length; i++){
    
        var node = addNode('second_' + i, icons[i]);    
        addLink(rootNode, node);            
        if(i == 0 || i == icons.length - 1){
            for(var j=0; j<4; j++){
                var thirdNode = addNode('third_' + j, 'green');
                addLink(node, thirdNode);
                
                if(j == 3){
                    for(var k=0; k<4; k++){
                        var kNode = addNode('leaf_' + k, 'gray');
                        addLink(thirdNode, kNode);
                    }
                }
            }
        }
    }
    
    // 树形布局
    scene.doLayout(JTopo.layout.TreeLayout(direction, 30, 107));//这个方法有bug 当为左右的时候不能调整连线方向
    
});
	